<template>
  <div class="user-role-warp" :style="styleHeight">
    <div class="user-role-warp-box" ref="userRoleWarpBoxRef">
      <el-form :inline="true" :model="userQueryParam" ref="user" size="small" style="height:51px;overflow:hidden;">
        <el-form-item label="用户名称">
          <el-input v-model="userQueryParam.userName" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="学生学号">
          <el-input v-model="userQueryParam.stuNumber" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="选择用户班级" >
          <el-select v-model="userQueryParam.banJiId" placeholder="选择班级">
            <el-option v-for="(item,index) in allGrade" :key="index" :label="item.bname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addMenu(-1)">新增用户</el-button>
        </el-form-item>
      </el-form>

        <div class="grid-content bg-purple">
          <el-table
              :border="true"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              :default-sort = "{}"
            >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="stuNumber"
                label="学号"
                width="120"
                sortable>
            </el-table-column>
            <el-table-column
                prop="userName"
                label="姓名"
                width="120"
                >
            </el-table-column>
            <el-table-column
                prop="address"
                label="家庭住址"
                width="400"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="phone"
                label="电话"
                width="120"
                >
            </el-table-column>

            <el-table-column label="性别"  width="120">
              <template slot-scope="scope">
              {{scope.row.sex==0?'男':'女'}}
              </template>
            </el-table-column>
            <el-table-column label="政治面貌" width="200">
              <template slot-scope="scope">
                  {{politicaloutlook[scope.row.politicaloutlook]}}
              </template>
            </el-table-column>
<!--            <el-table-column hidden-->
<!--               prop="createTime"-->
<!--               label="创建时间"-->
<!--               sortable-->
<!--            >-->
<!--            </el-table-column>-->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="success "
                    @click="addMenu(scope.row.id)">编辑</el-button>

                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center;margin-top: 20px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page=userQueryParam.pageNumber
                :page-sizes="[10, 50, 100, 200]"
                :page-size=userQueryParam.pageSize
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total=PageInfo.total>
            </el-pagination>
          </div>
        </div>
      <el-dialog
          :before-close="handleClose"
          :title="title"
          :visible.sync="dialogVisible"
          width="50%"
         >
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="姓名">
                  <el-input v-model="user.userName"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select v-model="user.sex" class="selected" placeholder="请选择性别">
                    <el-option
                        v-for="item in sexs"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="家庭住址">
                  <el-input v-model="user.address"></el-input>
                </el-form-item>
                <el-form-item label="政治面貌">
                  <el-select v-model="user.politicaloutlook" class="selected" placeholder="请选择">
                    <el-option
                        v-for="item in politicaloutlooks"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>


              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item label="行政班级">
                  <el-select class="selected" v-model="user.banJiId" placeholder="选择班级">
                    <el-option v-for="(item,index) in allGrade" :key="index" :label="item.bname" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学号">
                  <el-input v-model="user.stuNumber"></el-input>
                </el-form-item>
                <el-form-item label="登录密码">
                  <el-input v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input max="11" v-model="user.phone"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false, handleClose" >取 消</el-button>
          <el-button type="primary" @click="updateAndSaveUser">确 定</el-button>
        </span>
      </el-dialog>
    </div>


  </div>
</template>

<script>
import { deletUserById,getUserById,updateUser,getAllClassByFid ,getPageByParam} from '@/api/user/index'
import { getSession } from "@/utils/storage";


export default {
  name: 'userAdmin',

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      politicaloutlooks: [
          {
            id: 0,
            value: '中共党员'
          },
        {
          id: 1,
          value: '共青团员'
        },
        {
          id: 2,
          value: '群众'
        },
        {
          id: 3,
          value: '其他党派'
        }
      ],
      sexs:[
        {
          id:0,
          value:'男生'
        },
        {
          id:1,
          value: '女生'
        }
      ],
      user:{
        sex:0,//性别
        politicaloutlook:1,
    },
      fid:'',
      politicaloutlook:['中共党员(含预备党员)','共青团员','群众','其他党派'],
      filterText:'',
      tableHeight: 0,
      PageInfo: {
        total:0,
      },
      title:'',
      tableData: [],
      multipleSelection: [],
      userQueryParam: {
        pageNumber:1,
        pageSize:10,
        fid:''
      },
      allGrade:{},
      dialogVisible: false,
      form:{}
    }
  },
  computed: {
    // 动态高度，适配各布局。单页面的画，高度设为100%即可。
    styleHeight() {
      let { layout, isTagsView } = this.$store.state.layoutConfig;
      if (layout === 'fashion' || layout === 'strange') {
        if (isTagsView) {
          return {
            height: `calc(100vh - 84px)`
          }
        } else {
          return {
            height: `calc(100vh - 50px)`
          }
        }
      } else {
        return {
          height: `calc(100vh - 50px)`
        }
      }
    }
  },
  mounted() {
    // this.setTableHeight()
    this.getUserInfo();
    this.getAllClass(this.fid);
    this.getPageByParam(this.userQueryParam);
  },
  methods: {
    //关闭按钮
    handleClose(done){
     this.user={}
      done();
    },
    //获取缓存
    getUserInfo(){
      this.fid = getSession('userInfo').finstructor.id;
      this.userQueryParam.fid=getSession('userInfo').finstructor.id;
    },
    getPageByParam(userQueryParam){
      getPageByParam(userQueryParam).then(res=>{
            this.tableData = res.data.records;
            this.PageInfo.total = res.data.total;
          }
      ).catch(() => {console.log("xxx") })
    },
    handleSizeChange(val) {
      this.userQueryParam.pageSize=val;
      this.getPageByParam(this.userQueryParam);
    },
    handleCurrentChange(val) {
      this.userQueryParam.pageNumber=val;
      this.getPageByParam(this.userQueryParam);
    },
    //通过辅导员id查询所管辖的班级
    getAllClass(value){
      getAllClassByFid(value).then(res => {
        this.allGrade = res.data
      }).catch(() => {console.log("xxx") })
    },

    // 查询
    onSearch() {
      this.getPageByParam(this.userQueryParam);
    },
    // 重置
    onReset() {
      this.user={};
    },
    // 新增
    addMenu(value) {
      //控制框的显示与隐藏
      this.dialogVisible = true;
      if (value==-1){
        this.title="新增用户"
      }else {
        this.title="修改用户信息";
        getUserById(value).then(res=>{
         this.user = res.data;
        }).catch(res=>{
          console.log(res)
        })
      }
    },
    updateAndSaveUser(){
      updateUser(this.user).then(res => {
        if (!res.code===200){
          this.$message.error("操作失败");

        }
        this.$message.success('成功！')
        this.dialogVisible= false;
        this.user={};
        this.getPageByParam(this.userQueryParam);
      }).catch(res=>{
        if (res.code===500){
          this.$message.error('失败！')
        }
      })
    },

    // 表格行菜单删除
    handleDelete(value) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletUserById(value).then(res=>{
          if (res.code===200){
            this.getPageByParam(this.userQueryParam)
          }
        }).catch(res=>{

        })
        this.$message.success('删除成功！')
      }).catch(() => { })
    }
  }
};
</script>

<style scoped lang="scss">
.user-role-warp {
  border-radius: 0px;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  .user-role-warp-box {
    padding: 15px;
    height: 100%;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03) !important;
  }
  .selected {
    width: 100%;
  }
}
</style>
